﻿<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>在线演示</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
    <script type="text/javascript" src="js/cloudwalk.js" ></script>
    <script type="text/javascript" src="js/browserDetect.js" ></script>
</head>
	
<body>
	<div id="contain">
    	<div id="top">
			<div id="brand">
            	<img src="img/logo4.png" alt="logo">
            </div>
            <ul id="top_menu">
            	<li><a href="#">技术演示</a></li>
                <li><a href="http://api.cloudwalk.cn:8081/developer-home">开发者中心</a></li>
                <li><a href="http://www.cloudwalk.cn/caseInfo.html">案 例</a></li>
            </ul>
		</div>
        
        <div id="banner">
        	<div id="banner_menu">
            	<a href="#">技术演示</a>
                <span>在线演示</span>
            </div>
        </div>
        
        <div id="contain">
        	<div id="main">

				<div id="downloadNotice" class="hide">人脸识别控件未安装，请&nbsp;<a class="btn" id="downaddr" style="color:blue;" target="_blank" href="./download/CloudWalkNisSetup.exe"><strong>点击这里</strong></a>&nbsp;下载并双击程序进行安装。安装好后请重启浏览器</div>
				<div id="newVersionNotice" class="hide">人脸识别控件不是最新版本，请&nbsp;<a class="btn" id="downaddr" style="color:blue;" target="_blank" href="./download/CloudWalkNisSetup.exe"><strong>点击这里</strong></a>&nbsp;下载并双击程序进行安装。安装好后请重启浏览器</div>
					
        		<div id="rside">		
                    <div id="cloudwalkwebobj" style="float:left;margin-left:20%;"></div>
                    
                    <button id="bt_chose0" class="btchose" style="float:left;margin-left:5%">红外活体检测</button>
                    
					<button id="bt_chose1" class="btchose" style="float:left;margin-left:5%">停止摄像头</button>
                    <button id="bt_chose2" class="btchose" style="float:left;margin-left:5%">开启摄像头</button>
					<button id="bt_chose3" class="btchose" style="float:left;margin-left:5%">人脸比对（本地）</button>
                    
					<input type="text" placeholder="上传照片进行比对" style="width:300px;height:60px;font-size:25px;float:left;margin-left:5%;margin-top:10px;" name="textfield" id="textfield"/>
					<button class="upload_btn" style="float:left;display:block;height:64px;width:90px;text-align:center;line-height:64px;font-size:25px;margin-left:5px;margin-top:10px;background:#4b8d7c;color:#fff;">上传</button>
					<input style="display:none;" class="upload_file" type="file"/>
					
					<div id="result" style="float:left;"></div>
                    <div id="bestface"  style="float:left;border:1px solid #ccc;margin-left:20%;width:300px;height:400px;">
                        <img id="bestImgObj" style="width:300px;height:400px;"/>
                    </div>
					<div id="localface" style="margin-top:10px;float:left;border:1px solid #ccc;margin-left:5%;width:300px;height:400px;">
                        <img id="localImgObj" style="width:300px;height:400px;"/>
					</div>
                </div>
        	</div> 	
        </div>     
    </div>
</body>
<script type="text/javascript">  
  
$('.upload_btn').click(function (e) {
	e.preventDefault();
	$('.upload_file').click();
	//click_browseFile();
});
  
$('.upload_file').change(function (e) {
   document.getElementById("textfield").value=this.value;
   
   if(isIE6_8())
   {
		$("#localImgObj").attr("src",this.value);
   }
   else
   {
	   var objUrl = getObjectURL(this.files[0]) ;
	   if (objUrl) {
			 $("#localImgObj").attr("src",objUrl);
		}
	}
}); 

function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}  
</script>
</html>
